<template>
  <div class="hello">
    <div class="app-container home">
      <div class="top_title">视频检测系统</div>
      <div class="content_box">
        <div class="left_one">
          <!-- <dv-border-box-8> -->

          <div class="left_one_video">
            <VideoPlayer ref="VideoPlayer1" :videoSource="videoSource" />
          </div>
          <!-- </dv-border-box-8> -->

          <!-- <Leftone @showmode="showmode"/> -->
        </div>

        <div class="rigth_three">
          <!-- <dv-border-box-8 :reverse="true"> -->
          <div class="left_one_video">
            <VideoPlayer ref="VideoPlayer2" :videoSource="videoSource" />
          </div>
          <!-- </dv-border-box-8> -->

          <!-- <Righttree :showboxsminggan="showmodebox"/> -->
        </div>
      </div>
      <div class="but_last_box">


        <dv-border-box-1>
          <div class="onbox_">

       
        <div class="top_last_box">
          <el-button type="success" icon="el-icon-video-camera-solid" @click="openpaly">开始播放</el-button>
          <el-button type="info" icon="el-icon-caret-right" @click="pausevideo">暂停视频</el-button>
        </div>
        <div class="top_last_box">
          <el-input v-model="videoSource" placeholder="请输入视频源"></el-input>

          <el-button type="warning" :loading="loading" @click="onloading">加载</el-button>
        </div>   </div></dv-border-box-1>
      </div>
    </div>
  </div>
</template>

<script>
import VideoPlayer from "./videoplayer.vue";
export default {
  name: "HelloWorld",
  data() {
    return {
      videoSource: "",
      loading:false
    };
  },
  props: {
    msg: String,
  },
  components: {
    VideoPlayer,
  },
  methods: {
    openpaly() {
      console.log("openpaly");
      this.$refs.VideoPlayer1.onPlay();
      this.$refs.VideoPlayer2.onPlay();
    },
    pausevideo(){
      console.log("pausevideo");
      this.$refs.VideoPlayer1.onPause();
      this.$refs.VideoPlayer2.onPause();
    },
    onloading(){
      this.loading=true
      this.openpaly()
      setTimeout(()=>{
      this.loading=false

      },500)
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
$heights: 100vh;
$contenheight: 600px;
$leftwidth: 900px;
$centerwidth: 900px;
$rightwidth: 900px;

@font-face {
  font-family: "PangMenZhengDao";
  src: url("../assets/font/pmzd.ttf");
  font-weight: normal;
  font-style: normal;
}

.home {
  // width: 2970px;
  width: 100%;
  color: #fff;
  position: relative;
  height: $heights;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  flex-direction: column;
  background: url("../assets/images/bg.jpg") no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
}

.top_title {
  font-size: 45px;
  font-family: "PangMenZhengDao";
  font-weight: 400;
  color: #fbffff;
  margin-top: -5px;
  letter-spacing: 3px;
  width: 100%;
  text-align: center;
  background: url("../assets/images/topbg.png") no-repeat;
  background-size: 180%;
  background-position: center;
}
.but_last_box {
  width: calc(100%  );
  height: 150px;
  // background: red;
  .top_last_box {
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
  }
}
.onbox_{
  padding: 20px;
padding-top: 30px;
  // margin: 30px;
}
.content_box {
  display: flex;
  flex-direction: row;
  width: calc(100% - 30px);
  height: $contenheight;
  position: relative;
  padding: 15px;
  justify-content: space-between;
  // background: red;
  margin-top: 10px;
  &::before {
    content: "";
    display: inline-block;
    position: absolute;
    left: 0;
    width: 400px;
    height: $contenheight;
    z-index: 2;
    background: url("../assets/images/frame_left.png") no-repeat;
    background-size: 100% 100%;
  }
  &::after {
    content: "";
    display: inline-block;
    width: 400px;
    position: absolute;
    z-index: 2;
    right: 0;
    height: $contenheight;
    background: url("../assets/images/frame_right.png") no-repeat;
    background-size: 100% 100%;
    background-position: top right;
  }
}
.left_one {
  // width: calc($leftwidth - 20px);
  // padding:10px;
  // width: $leftwidth;
}

.rigth_three,
.left_one {
  width: calc(50% - 20px);
  padding: 10px;
}
.left_one_video {
  padding: 20px;
}
</style>
  


